<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      template="profile.xhtml">
    <ui:define name="head">
        
    </ui:define>
    <ui:define name ="body">
        <h:form>
            <h:panelGrid columns="2">
                <h:outputText>screenName</h:outputText>
                <h:inputText value="#{searchController.screenName}"/>
            </h:panelGrid>
            <p:commandButton value="buscar" actionListener="#{recommendationController.search}" update=":panel-resultado"/>
        </h:form>
        <h:panelGroup id="panel-resultado">
            <h:panelGroup rendered="#{not empty searchController.resultUser}">
                <script type="text/javascript">
                    //aca van los scripts globales, despues los sacamos a un archivo .js      
                    $(document).ready(function(){

                        //Data to show
                        //Add base user node
                        var currentUser = {'value':'#{searchController.screenName}',
                                           'group':0}; 
                        var follows = #{searchController.resultFollows};
                        var followers = #{searchController.resultFollowers};
                        showGraphChart(currentUser,follows,followers);   
                    });
                </script>
                <h1>User</h1>
                #{searchController.resultFollowers}
                <h1>Followers</h1>
                <ui:repeat var="follower" value="#{searchController.resultFollowers}" varStatus="myVarStatus">
                    <h:outputText value="#{myVarStatus.index} #{follower}" rendered="#{follower.id !=0}"/> <br/>
                </ui:repeat>
                <h1>Follows</h1>
                <ui:repeat var="follow" value="#{searchController.resultFollows}" varStatus="myVarStatus">
                    <h:outputText value="#{myVarStatus.index} #{follow}"/> <br/>
                </ui:repeat>
            </h:panelGroup>
        </h:panelGroup>
    </ui:define>    
</ui:composition>

